<template>
  <div class="home">
    <!-- 头部标题 -->
    <HeadMain />
    <FootMain :tiptext="tiptext" />
    <!-- 场景 -->
    <Seen ref="seen" @clickItem="clickItem" :taskids="taskids" />
    <!-- 底部提示 -->
    <!-- 进入模块的提示 -->
    <div class="mktipszz" v-if="mktipshow">
      <div class="mktipsbox">
        <img src="@/images/mktips.png" alt="" class="mktipsbj" />
        <img src="@/images/feilogpng.png" alt="" class="mkicon" />
        <div class="mktipsname">
          您已进入CTDIw检测模块，在本模块中，需要根据提示内容完成模体选择与摆位、参数设置与扫描、测量中心数值、测量上方数值、测量右侧数值、测量下方数值、测量左侧数值等步骤
        </div>

        <div class="mktipsdes beautifulScroll">
          <img src="@/images/jieshao1.png" alt="" class="jieshao1" />
        </div>
        <div
          class="tool mktipsque"
          @click=";(mktipshow = false), (wpchoiceshow = true)"
        >
          <img src="@/images/queac.png" alt="" class="active" />
          <img src="@/images/que.png" alt="" class="normal" />
          <div class="quename">确定</div>
        </div>
      </div>
    </div>

    <!-- 模块物品选择 -->
    <div class="gjtoolbox" v-if="wpchoiceshow">
      <div class="wptipsbox" :class="{ wptipsboxs: gjltips === '回答正确' }">
        {{ gjltips }}
      </div>
      <div class="wpmain">
        <div
          class="wpbox"
          v-for="item in wpdata"
          :key="item.id"
          @click="wpidfn(item.id)"
        >
          <div class="tool">
            <img :src="item.src" alt="" class="wpimgitems" />
            <img
              src="@/images/wpbj.png"
              alt=""
              class="normal"
              :ref="'normalImg' + item.id"
              v-if="!wpid.includes(item.id)"
            />
            <img
              src="@/images/wpbjac.png"
              alt=""
              class="active"
              v-if="!wpid.includes(item.id)"
            />
            <img
              class="wpimgyx"
              src="@/images/wpbjac.png"
              alt=""
              v-if="wpid.includes(item.id)"
            />
          </div>
          <el-tooltip
            effect="dark"
            :content="item.name"
            style="cursor: pointer"
          >
            <div class="wpname">{{ item.name }}</div>
          </el-tooltip>
        </div>
      </div>
      <div class="tool gjtoolqd" @click="wpqdfn">
        <img src="@/images/qd.png" alt="" class="normal" />
        <img src="@/images/qdac.png" alt="" class="active" />
        <div class="gjtoolname">确定</div>
      </div>
      <div
        class="tool gjtoolqd"
        @click=";(wpchoiceshow = false), (mxshow = true)"
        v-if="jxshow"
      >
        <img src="@/images/qd.png" alt="" class="normal" />
        <img src="@/images/qdac.png" alt="" class="active" />
        <div class="gjtoolname">继续</div>
      </div>
    </div>
    <!-- 模型预览show -->
    <div class="mkylbox" v-if="mxshow">
      <!-- 模型预览 -->
      <div class="mxylitem">
        <ShowMx :mxmtnumber="1" v-if="mxshow" />
      </div>
      <!-- 模型介绍 -->
      <div class="mxyldes beautifulScroll">
        诊断床定位精度的检测是通过测量实际床位移与设定值的偏差来验证其准确性。
        50cm钢直尺的核心作用是作为基准长度量具：
        （1）直接标定移动距离：将直尺固定于床面或扫描架，通过床面移动50cm（或分段移动），用直尺刻度直接比对实际位移与系统显示值的误差，无需依赖CT图像（避免图像失真干扰）。
        高精度验证：钢直尺的毫米级精度（通常±0.1mm）远高于CT床位移的允许误差（如±1mm），确保检测结果可靠。
        （2）规避系统误差：避免使用CT内置测量功能（可能受床编码器或软件校准影响），以实物基准独立验证机械精度。
        简言之，50cm钢直尺是脱离CT系统、直接验证床位移真实性的关键物理基准工具。
      </div>
      <div
        class="tool gjtoolqd"
        @click="
          ;(mxshow = false),
            (taskshow = true),
            (step = 1),
            (mxchoiceshow = true)
        "
      >
        <img src="@/images/qd.png" alt="" class="normal" />
        <img src="@/images/qdac.png" alt="" class="active" />
        <div class="gjtoolname">确定</div>
      </div>
    </div>
    <!-- 第一步选择体模步骤  v-->
    <div class="center tmchoiceboxbj" v-if="mxchoiceshow">
      <div class="tmchoicebox center">
        <div class="tmtitle">请选择检测模体</div>
        <div class="tmmain">
          <div
            class="tmitem"
            @click="ptmxfn(1)"
            :class="{ tmitemac: mxid == 1 }"
          ></div>
          <div
            class="tmitem"
            @click="ptmxfn(2)"
            :class="{ tmitemac: mxid == 2 }"
          ></div>
        </div>
        <div class="tool gjtoolqd" @click="ptmxfnqd">
          <img src="@/images/qd.png" alt="" class="normal" />
          <img src="@/images/qdac.png" alt="" class="active" />
          <div class="gjtoolname">确定</div>
        </div>
      </div>
    </div>

    <!-- 播放动画 -->
    <div class="center tctipbox" @click="taskids = 1.21" v-if="taskids == 1.2">
      播放动画
    </div>
    <!-- 动画播放完成后的弹窗提醒  -->
    <div class="tctipbox center" v-if="taskids == 1.21">
      首先检测中心点的数据，需要对未测量的探测器放置孔用模体相同材料填充棒填充
      <div class="tool gjtoolqd" @click="steps = 3">
        <img src="@/images/qd.png" alt="" class="normal" />
        <img src="@/images/qdac.png" alt="" class="active" />
        <div class="gjtoolname">确定</div>
      </div>
    </div>
    <!-- 定位选择题 -->
    <div class="cmchoicebox center" v-if="taskids == 1.4">
      <!-- 左侧 -->
      <div
        class="cmchoiceitem"
        @click="cmchoiceitemid = 1"
        :class="{
          cmchoiceitemhover: cmchoiceitemid == 1
        }"
      ></div>
      <!-- 右侧 -->
      <div
        class="cmchoiceitem"
        @click="cmchoiceitemid = 2"
        :class="{
          cmchoiceitemhover: cmchoiceitemid == 2
        }"
      ></div>
      <div class="tool gjtoolqd" @click="cmchoiceitemfn">
        <img src="@/images/qd.png" alt="" class="normal" />
        <img src="@/images/qdac.png" alt="" class="active" />
        <div class="gjtoolname">确定</div>
      </div>
    </div>
    <!-- 定位选择题提示 -->
    <div class="cmchoicetips center" v-if="cmchoicetips != ''">
      {{ cmchoicetips }}
    </div>
    <!-- 提示进入扫描jian -->
    <div class="tctipbox center" v-if="taskids == 2.1">
      请进入扫描间进行扫描操作
      <div class="tool gjtoolqd" @click="taskids = 2.11">
        <img src="@/images/qd.png" class="normal" />
        <img src="@/images/qdac.png" class="active" />
        <div class="gjtoolname">确定</div>
      </div>
    </div>
    <!-- 点击模型电脑 -->
    <div class="tctipbox center" v-if="taskids == 2.11">
      点击电脑
      <div class="tool gjtoolqd" @click="taskids = 2.12">
        <img src="@/images/qd.png" alt="" class="normal" />
        <img src="@/images/qdac.png" alt="" class="active" />
        <div class="gjtoolname">确定</div>
      </div>
    </div>
    <!-- 点击新建患者页面   -->
    <div class="gzzbox center" v-if="taskids >= 2.12 && taskids <= 7.3">
      <img
        src="@/images/tjhz1.png"
        alt=""
        @click="taskids = 2.13"
        class="tjhzimg1"
        v-if="taskids == 2.12"
      />
      <!-- 记录患者组件 -->`
      <GZbox
        :mxid="mxid"
        @gotask="gotask"
        v-if="taskids > 2.12 && taskids <= 7.3"
        :taskids="taskids"
      />
    </div>
    <!-- 动画播放完成提示  -->
    <div
      class="tctipbox center"
      v-if="
        taskids == 4.11 || taskids == 5.11 || taskids == 6.11 || taskids == 7.11
      "
    >
      已将剂量探头移至头部体模下方，请进入扫描室进行扫描操作
      <div class="tool gjtoolqd" @click="steps = 2">
        <img src="@/images/qd.png" alt="" class="normal" />
        <img src="@/images/qdac.png" alt="" class="active" />
        <div class="gjtoolname">确定</div>
      </div>
    </div>

    <!-- 导航菜单 -->
    <div class="taskbox" v-if="taskshow">
      <div
        class="task"
        v-for="item in taskdata"
        :key="item.id"
        @click="step = item.id"
      >
        <div class="taskimg" :class="{ taskimgs: step == item.id }">
          {{ item.name }}
        </div>
        <div
          class="taskitems"
          v-for="items in item.items"
          :key="items.id"
          v-show="step == item.id"
          :class="steps == items.id ? 'taskitemsac' : ''"
          @click="steps = items.id"
        >
          <span>{{ items.name }}</span>
        </div>
      </div>
    </div>

    <!-- 结果判断 -->
    <div class="jgzzbox" v-if="taskids >= 9.1">
      <!-- 主题框1 -->
      <div class="jgpdbox1 center">
        上述某某医院某某牌医用CT设备质量检测（诊断床定位精度检测）是否符合《中华人民共和国卫生行业标准WS
        519-2019X射线计算机体层摄影装置质量控制检测规范》的要求？
        <!-- 按钮 -->
        <div class="jgpdan center">
          <div class="tool jgpdanitem" @click="taskids = 9.2">是</div>
          <div class="tool jgpdanitem" @click="taskids = 9.3">否</div>
        </div>
      </div>
      <!-- 否 -->
      <div class="jgpdbox1 center" v-if="taskids == 9.3">
        诊断床定位精度检测如不合格，请及时联系CT设备厂家工程师维修，同时应该核实检测设备是否经过国家计量院的标准，是否发生故障
        <!-- 按钮 -->
        <div class="jgpdan center">
          <div class="tool jgpdanitem" @click="pdwcfn()">确定</div>
        </div>
      </div>
      <!-- 是 -->
      <div class="jgpdbox1 center" v-if="taskids == 9.2">
        经检测该项目符合上述标准要求
        <!-- 按钮 -->
        <div class="jgpdan center">
          <div class="tool jgpdanitem" @click="pdwcfn()">确定</div>
        </div>
      </div>
      <div class="jgpdbox1 center" v-if="taskids == 9.4">
        {{
          mxid == 1
            ? '您还有体部模体未检测，请继续检测'
            : '您还有头部模体未检测，请继续检测'
        }}
        <!-- 按钮 -->
        <div class="jgpdan center">
          <div
            class="tool jgpdanitem"
            @click="
              ;(step = 1), (taskids = 1.1), (steps = 1), (mxchoiceshow = true)
            "
          >
            确定
          </div>
        </div>
      </div>

      <!-- 最后 -->
      <div class="jgpdbox1 center" v-if="taskids == 9.5">
        您已完成CTDIw检测模块
        <!-- 按钮 -->
        <div class="jgpdan center">
          <div class="tool jgpdanitem" @click="gohome">返回模块选择页面</div>
          <div class="tool jgpdanitem" @click="gonext">下一个实验</div>
        </div>
      </div>
    </div>
    <!-- 8.1 记录数值弹窗  -->
    <div class="tctipbox center" v-if="taskids == 8.1">
      请进入CT室查看空气比释动能值并记录
      <div class="tool gjtoolqd" @click="taskids = 8.11">
        <img src="@/images/qd.png" class="normal" />
        <img src="@/images/qdac.png" class="active" />
        <div class="gjtoolname">确定</div>
      </div>
    </div>
    <!-- 点击模型电脑 -->
    <div class="tctipbox center" v-if="taskids == 8.11">
      点击电脑
      <div class="tool gjtoolqd" @click="taskids = 8.12">
        <img src="@/images/qd.png" alt="" class="normal" />
        <img src="@/images/qdac.png" alt="" class="active" />
        <div class="gjtoolname">确定</div>
      </div>
    </div>
    <!-- 结果判断完成 -->
    <!-- 记录数值 -->
    <JLd v-if="taskids == 8.12" />
  </div>
</template>

<script>
import FootMain from './footMain.vue'
import GZbox from './gZbox.vue'
import HeadMain from './headMain.vue'
import JLd from './jLd.vue'
import ShowMx from './showMx.vue'
import Seen from '@/view/seen.vue'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { ShowMx, HeadMain, Seen, FootMain, GZbox, JLd },
  data() {
    //这里存放数据
    return {
      mktipshow: true, //默认true
      wpchoiceshow: false,
      wpdata: [
        {
          id: 1,
          name: '50mm直尺',
          src: require('@/images/wp10.png')
        },
        {
          id: 2,
          name: '倾角仪',
          src: require('@/images/wp2.png')
        },
        {
          id: 3,
          name: '头模（160mm）',
          src: require('@/images/wp3.png')
        },
        {
          id: 4,
          name: '体模（320mm）',
          src: require('@/images/wp11.png')
        },
        {
          id: 5,
          name: '剂量探头',
          src: require('@/images/wp5.png')
        },
        {
          id: 6,
          name: '水模填充柱',
          src: require('@/images/wp6.png')
        },
        {
          id: 7,
          name: '数据转换器',
          src: require('@/images/wp7.png')
        },
        {
          id: 8,
          name: 'CT性能模体',
          src: require('@/images/wp8.png')
        },
        {
          id: 9,
          name: '笔记本电脑',
          src: require('@/images/wp1.png')
        }
      ],
      wpid: [],
      gjltips: '',
      jxshow: false,
      mxshow: false,
      taskdata: [
        {
          id: 1,
          name: '模体选择与摆位',
          items: [
            {
              id: 1,
              name: '选择模体'
            },
            {
              id: 2,
              name: '放置填充棒'
            },
            {
              id: 3,
              name: '安装剂量仪'
            },
            {
              id: 4,
              name: '定位'
            }
          ]
        },
        {
          id: 2,
          name: '参数设置与扫描',
          items: [
            {
              id: 1,
              name: '新建患者'
            },
            {
              id: 2,
              name: '扫描定位像'
            },
            {
              id: 3,
              name: '设置扫描参数'
            }
          ]
        },
        {
          id: 3,
          name: '测量中心数值'
        },
        {
          id: 4,
          name: '测量上方数值',
          items: [
            {
              id: 1,
              name: '调换探头位置'
            },
            {
              id: 2,
              name: '扫描'
            }
          ]
        },
        {
          id: 5,
          name: '测量右侧数值',
          items: [
            {
              id: 1,
              name: '调换探头位置'
            },
            {
              id: 2,
              name: '扫描'
            }
          ]
        },
        {
          id: 6,
          name: '测量下方数值',
          items: [
            {
              id: 1,
              name: '调换探头位置'
            },
            {
              id: 2,
              name: '扫描'
            }
          ]
        },
        {
          id: 7,
          name: '测量左侧数值',
          items: [
            {
              id: 1,
              name: '调换探头位置'
            },
            {
              id: 2,
              name: '扫描'
            }
          ]
        },
        {
          id: 8,
          name: '记录数值'
        },
        {
          id: 9,
          name: '结果判断'
        }
      ],
      tiptext: '',
      step: 0, //大步骤标识
      steps: 0, //小步骤标识
      taskids: 1, //任务表示 - 指的是执行的干什么
      taskshow: false,
      timer: null,
      mxchoiceshow: false,
      mxid: 0, ///默认0
      cmchoicetips: '',
      dwchoiceshow: false,
      cmchoiceitemid: 0, //定位选择题答案
      idArray: []
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    cmchoicetips: {
      handler(i) {
        if (i != '') {
          this.timer = setTimeout(() => {
            this.cmchoicetips = ''
          }, 1000)
        }
      }
    },
    step: {
      handler(i) {
        if (i) {
          this.steps = 1
          if (i == 1 && this.steps == 1) {
            this.taskids = 1.1
          }
          if (i == 1 && this.steps == 2) {
            this.mxchoiceshow = false
            this.taskids = 1.2
          }
          if (i == 1 && this.steps == 3) {
            this.taskids = 1.3
          }
          if (i == 1 && this.steps == 4) {
            this.taskids = 1.4
          }
          if (i == 2 && this.steps == 1) {
            this.taskids = 2.1
          }
          if (i == 2 && this.steps == 2) {
            this.taskids = 2.2
          }
          if (i == 2 && this.steps == 3) {
            this.taskids = 2.3
          }
          if (i == 3 && this.steps == 1) {
            this.taskids = 3.1
          }
          if (i == 4 && this.steps == 1) {
            this.taskids = 4.1
          }
          if (i == 4 && this.steps == 2) {
            this.taskids = 4.2
          }
          if (i == 5 && this.steps == 1) {
            this.taskids = 5.1
          }
          if (i == 5 && this.steps == 2) {
            this.taskids = 5.2
          }
          if (i == 6 && this.steps == 1) {
            this.taskids = 6.1
          }
          if (i == 6 && this.steps == 2) {
            this.taskids = 6.2
          }
          if (i == 7 && this.steps == 1) {
            this.taskids = 7.1
          }
          if (i == 7 && this.steps == 2) {
            this.taskids = 7.2
          }
          if (i == 8 && this.steps == 1) {
            this.taskids = 8.1
          }
          if (i == 9 && this.steps == 1) {
            this.taskids = 9.1
          }
        }
      },
      immediate: true,
      deep: true
    },
    steps: {
      handler(i) {
        if (i == 1 && this.step == 1) {
          this.taskids = 1.1
        }
        if (i == 2 && this.step == 1) {
          this.mxchoiceshow = false
          this.taskids = 1.2
        }
        if (i == 3 && this.step == 1) {
          this.taskids = 1.3
        }
        if (i == 4 && this.step == 1) {
          this.taskids = 1.4
        }
        if (i == 1 && this.step == 2) {
          this.taskids = 2.1
        }
        if (i == 2 && this.step == 2) {
          this.taskids = 2.2
        }
        if (i == 3 && this.step == 2) {
          this.taskids = 2.3
        }
        if (i == 1 && this.step == 3) {
          this.taskids = 3.1
        }
        if (i == 1 && this.step == 4) {
          this.taskids = 4.1
        }
        if (i == 2 && this.step == 4) {
          this.taskids = 4.2
        }
        if (i == 1 && this.step == 5) {
          this.taskids = 5.1
        }
        if (i == 2 && this.step == 5) {
          this.taskids = 5.2
        }
        if (i == 1 && this.step == 6) {
          this.taskids = 6.1
        }
        if (i == 2 && this.step == 6) {
          this.taskids = 6.2
        }
        if (i == 1 && this.step == 7) {
          this.taskids = 7.1
        }
        if (i == 2 && this.step == 7) {
          this.taskids = 7.2
        }
        if (i == 1 && this.step == 8) {
          this.taskids = 8.1
        }
        if (i == 1 && this.step == 9) {
          this.taskids = 9.1
        }
      },
      immediate: true,
      deep: true
    },
    taskids: {
      handler(i) {
        // 重置提示
        this.tiptext = ''
        // 重置提示完成
        if (i == 1.1) {
          this.tiptext = '请选择模体'
        }
        if (i == 1.2) {
          this.tiptext = '对未测量的探测器放置孔用模体相同材料填充棒填充'

          // 播放动画 选择模体1
          if (this.mxid == 1) {
            // this.$refs.seen.playAction()
          }
          // 选择模体2 的时候
          if (this.mxid == 2) {
            // this.$refs.seen.playAction()
          }
        }
        if (i == 1.3) {
          this.tiptext = '安装剂量仪'

          // 播放动画 选择模体1
          if (this.mxid == 1) {
            // this.$refs.seen.playAction()
          }
          // 选择模体2 的时候
          if (this.mxid == 2) {
            // this.$refs.seen.playAction()
          }
        }
        if (i == 1.4) {
          this.dwchoiceshow = true
        }
        //
        if (i == 2.11) {
          this.tiptext = '请点击电脑'
        }
        if (i == 2.12) {
          this.tiptext = '点击“新建患者”建立一个新的扫描病人'
        }
        if (i == 2.13) {
          this.tiptext = '①输入姓名CTDIw-tb②输入年龄:25③选择性别:其他'
        }
        if (i == 2.14) {
          this.tiptext = '点击“头部”按钮，选择头部轴扫'
        }
        if (i == 2.15) {
          this.tiptext = '点击“头部”按钮，选择头部轴扫'
        }
        if (i == 2.16) {
          this.tiptext = '点击“患者检查”按钮'
        }
        if (i == 2.2) {
          this.tiptext = '点击“扫描”按钮，对CT剂量模体进行定位像扫描'
        }
        if (i == 2.3) {
          this.tiptext = '点击”扫描参数“按钮'
        }
        if (i == 2.31) {
          this.tiptext =
            '按照以下要求设置参数:取消勾选”剂量调制”KV:120 mAs:200扫描圈数:1准直宽度:11mm旋转时间:1.0s'
        }
        if (i == 3.1) {
          this.tiptext = '拖动定位线框，调整至合适大小'
        }
        if (i == 3.11) {
          this.tiptext = '点击进床按钮'
        }
        if (i == 3.12) {
          this.tiptext = '点击“扫描”按钮'
        }
        if (i == 4.2) {
          this.tiptext = '点击“立即重扫”按钮'
        }
        if (i == 4.21) {
          this.tiptext = '点击“扫描”按钮'
        }
        if (i == 5.2) {
          this.tiptext = '点击“立即重扫”按钮'
        }
        if (i == 5.21) {
          this.tiptext = '点击“扫描”按钮'
        }
        if (i == 6.2) {
          this.tiptext = '点击“立即重扫”按钮'
        }
        if (i == 6.21) {
          this.tiptext = '点击“扫描”按钮'
        }
        if (i == 7.2) {
          this.tiptext = '点击“立即重扫”按钮'
        }
        if (i == 7.21) {
          this.tiptext = '点击“扫描”按钮'
        }
        // 重置逻辑开始
        this.cmchoiceitemid = false
      },
      immediate: true,
      deep: true
    }
  },
  //方法集合
  methods: {
    clickItem(i) {
      if (i == '' && this.mxid == 1) {
        this.taskids = 1.21
      }
      if (i == '' && this.mxid == 2) {
        this.taskids = 1.21
      }
      if (i == '安装剂量仪' && this.mxid == 1) {
        this.steps = 4
      }
      if (i == '安装剂量仪' && this.mxid == 2) {
        this.steps = 4
      }
      if (i == '点击的电脑') {
        this.taskids = 2.12
      }
    },
    // 定位选择题
    cmchoiceitemfn() {
      if (this.cmchoiceitemid == 1) {
        this.step = 2
      } else if (this.cmchoiceitemid == 2) {
        this.cmchoicetips = '头部体模定位位置选择错误，请重新选择'
      } else {
        this.cmchoicetips = '请从选项中选择答案'
      }
    },
    wpidfn(i) {
      // 检查数组中是否已存在相同的元素
      const index = this.wpid.indexOf(i)
      // 如果存在相同的元素，先删除它
      if (index !== -1) {
        this.wpid.splice(index, 1)
        return
      }
      // 然后再将元素添加到数组中
      this.wpid.push(i)
    },
    wpqdfn() {
      //   正确答案配置
      const requiredValues = [3, 4, 5, 6, 7, 9]
      const wpidSet = new Set(this.wpid) // 将数组转换为 Set 以便于查找
      const requiredSet = new Set(requiredValues)

      // 判断 wpid 是否只包含 1, 2, 3 且没有多余的元素
      if (
        wpidSet.size === requiredSet.size &&
        [...requiredSet].every((val) => wpidSet.has(val))
      ) {
        this.gjltips = '回答正确'
        this.jxshow = true
      } else {
        this.gjltips =
          '回答错误，正确答案：头模(160 mm)  、体模(320 mm)  、 剂量探头、水模填充柱、数据转换器、笔记本电脑'
        this.jxshow = true
      }
    },
    gotask(i) {
      console.log('执行了数据更改', i)

      this.taskids = i
      if (i == 2.2) {
        this.steps = 2
      }
      if (i == 2.21) {
        this.timer = setTimeout(() => {
          this.steps = 3
          clearTimeout(this.timer)
        }, 1000)
      }
      if (i == 3.1) {
        this.step = 3
      }
      if (i == 4) {
        this.step = 4
      }
      if (i == 4.3) {
        this.step = 5
      }
    },
    gohome() {
      this.$router.push({
        name: 'home'
      })
    },
    gonext() {
      this.$router.push({
        name: 'mK4'
      })
    },
    ptmxfn(i) {
      this.mxid = i
      if (!this.idArray.includes(i)) {
        this.idArray.push(i)
      }
    },
    pdwcfn() {
      if (this.idArray.length < 2) {
        this.taskids = 9.4
      } else {
        this.taskids = 9.5
      }
    },
    ptmxfnqd() {
      if (this.mxid != 0) {
        this.steps = 2
      } else {
        console.log('请选择模体')
      }
    }
  }
}
</script>
<style scoped>
.home {
  height: 100%;
  width: 100%;
  position: absolute;
}
.mktipsbox {
  width: 1455px;
  height: 585px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.mktipsbj {
  width: 1455px;
  height: 585px;
}
.mkicon {
  width: 210px;
  height: 300px;
  position: absolute;
  left: 120px;
  top: 130px;
}
.mktipsname {
  width: 970px;
  height: 100px;
  position: absolute;
  right: 120px;
  top: 70px;
  font-size: 24px;
  color: #ffffff;
  font-weight: 800;
}
.mktipsdes {
  overflow-y: auto;
  width: 970px;
  height: 260px;
  position: absolute;
  right: 120px;
  top: 180px;
  font-size: 20px;
  color: #ffffff;
  padding: 15px 0;
}

.mktipsque {
  position: absolute;
  left: 50%;
  bottom: 0px;
  transform: translate(-50%, 0);
}
.mktipsque img {
  width: 197px;
  height: 48px;
}
.mktipszz {
  width: 100%;
  height: 100%;
  background: #000000da;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 9999999999999999;
}
.jieshao1 {
  width: 745px;
  height: 347px;
}

.quename {
  font-family: DingTalk JinBuTi;
  font-size: 18px;
  letter-spacing: 0.05em;
  color: #cce8e0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  cursor: pointer;
  height: 48px;
  line-height: 48px;
}
.gjtoolbox {
  position: absolute;
  left: 50%;
  top: 49%;
  transform: translate(-50%, -50%);
  width: 1104px;
  height: 657px;
  background: linear-gradient(317deg, #bec8d4 0%, #f1f7ff 100%);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  border-radius: 10px 10px 10px 10px;
  border: 2px solid #213047;
}
.gjtoolqd {
  cursor: pointer;
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translate(-50%, 0);
}
.gjtoolqd img {
  width: 142px;
  height: 69px;
}
.gjtoolname {
  font-size: 30px;
  letter-spacing: 2px;
  color: #ffffff;
  position: absolute;
  top: 9px;
}
.wpbox {
  display: flex;
  flex-direction: column;
  width: 154px;
  height: 190px;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  margin: 10px 13px;
}
.wpbox img {
  width: 154px;
  height: 154px;
  overflow: hidden;
}
.wpimgyx {
  width: 154px;
  height: 154px;
  cursor: pointer;
}
.wpmain {
  display: flex;
  flex-wrap: wrap;
  padding: 15px 10px;
}
.wpimgitems {
  width: 144px;
  height: 144px;
  position: absolute;
  cursor: pointer;
}

.wpname {
  width: 160px;
  font-size: 26px;
  color: #313d53;
  white-space: nowrap; /* 强制文本不换行 */
  overflow: hidden; /* 溢出隐藏 */
  text-overflow: ellipsis; /* 显示“...” */
}
.wptipsbox {
  width: 100%;
  text-align: center;
  font-size: 22px;
  height: 50px;
  line-height: 50px;
  color: rgb(255, 54, 4);
}
.wptipsboxs {
  color: rgb(0, 168, 76);
}
.mkylbox {
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 15px;
  background-color: rgb(185, 223, 255);
  padding: 20px;
  box-sizing: border-box;
}
.mxylitem {
  width: 400px;
  height: 300px;
  background-color: rgb(76, 173, 252);
}
.mxyldes {
  width: 350px;
  height: 300px;
  font-size: 18px;
  overflow: hidden;
  overflow-y: auto;
  padding: 0px 20px;
  box-sizing: border-box;
}
.taskbox {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translate(0, -50%);
}
.task {
  margin: 0px 0;
  cursor: pointer;
  position: relative;
}
.taskimg {
  min-width: 205px;
  max-width: auto;
  height: 42px;
  background: linear-gradient(to bottom, #013c2c, #046b6d);
  color: #ffffff;
  text-align: center;
  line-height: 42px;
  font-size: 18px;
  font-family: PingFang SC, PingFang SC;
}
.taskimgs {
  background: rgba(27, 173, 76, 0.877);
}
.taskimg:hover {
  border-radius: 0px 0px 0px 0px;
  background: rgba(27, 173, 76, 0.877);
  box-sizing: border-box;

  /* opacity: 1; */
}
.taskitems {
  text-align: center;
  min-width: 204px;
  max-width: auto;
  height: 42px;
  line-height: 42px;
  background: #065d14;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  border: 1px solid #61bff1;
}
.taskitems:hover {
  background: #065d14;
  border-radius: 0px 0px 0px 0px;
  opacity: 0.5;
  /* border: 1px solid #095d89; */
}
.taskitemsac {
  background: linear-gradient(to bottom, #569293, #026961);
  border-radius: 0px 0px 0px 0px;

  /* border: 1px solid #0090ff; */
}
.tmchoiceboxbj {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.664);
  z-index: 99999;
}
.taskitems span {
  font-size: 18px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  display: block;
}
.taskzt {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 191px;
}
.tmchoicebox {
  width: 600px;
  height: 300px;
  display: flex;
  flex-direction: column;
  background-color: #40795c;
}
.tmtitle {
  width: 100%;
  height: 50px;
  text-align: center;
  font-size: 18px;
  color: #ffffff;
  line-height: 50px;
  background-color: #026961;
}
.tmmain {
  height: 250px;
  width: 100%;
  background-color: #569293;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.tmitem {
  background-color: #065d14;
  width: 150px;
  height: 220px;
  cursor: pointer;
}
.tmitemac {
  background-color: #057518;
}

/* 结果判断样式 */
.jgzzbox {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999999;
}
.jgpdbox1 {
  width: 600px;
  height: 200px;
  background-color: #008177;
  font-size: 18px;
  color: #ffffff;
  padding: 20px;
}
.jgpdan {
  display: flex;
  color: #ffffff;
  font-size: 22px;
  cursor: pointer;
  bottom: -150px;
}
.jgpdanitem {
  margin: 0px 15px;
}
.tctipbox {
  font-size: 22px;
  background-color: #065d14;
  width: 400px;
  height: 300px;
  color: #f1f7ff;
  padding: 10px;
}
.cmchoicebox {
  display: flex;
  background: #008177;
  border-radius: 15px;
  width: 900px;
  height: 550px;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0px 25px;
}
.cmchoiceitem {
  background-color: #9dd0ff;
  width: 400px;
  height: 500px;
  cursor: pointer;
}
.cmchoiceitemhover {
  background-color: #0256a5;
}
.cmchoicetips {
  background: #3b615e;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #ffffff;
  width: 300px;
  height: 150px;
}
.cmchoicetips {
  background: #3b615e;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #ffffff;
  width: 300px;
  height: 150px;
}
.gzzbox {
  width: 1184px;
  height: 663px;
}
.tjhzimg1 {
  width: 1184px;
  height: 663px;
  cursor: pointer;
}
</style>
